<template>
	<view class="content">
		<view class="headers">
			<u--input placeholder="搜索" border="surround" v-model="req.name" @change="change" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399" shape="circle"></u--input>
			<view class="_select">
				<view class="leftView">
					<view @click="picker_show = true">
						<text>{{req.teacher_category_name || '学习语种'}}</text>
						<u-icon :name="picker_show == true ? 'arrow-up-fill' : 'arrow-down-fill'" color="#333" size="15"></u-icon>
					</view>
					<view @click="teacherCountry_show = true">
						<text>{{req.country_name || '来自国家'}}</text>
						<u-icon :name="teacherCountry_show == true ? 'arrow-up-fill' : 'arrow-down-fill'" color="#333" size="15"></u-icon>
					</view>
				</view>
				<view class="rightView">
					<u--image :showLoading="true" src="../../../static/Home/shaixuan.png" width="24rpx" height="20rpx"
						radius="0"></u--image>
					<text>确定筛选</text>
				</view>
			</view>
		</view>
		<view v-for="(item,index) in lists" :key="index" class="listItem">
			<video id="myVideo" :src="item.video" @error="videoErrorCallback"></video>
			<view class="BoxOne">
				<u--image :showLoading="true" :src="item.avatar" width="94rpx" height="94rpx" radius="0"
					shape="circle"></u--image>
				<view class="BoxContent">
					<view class="BoxTop marginBottom">
						<text class="title">{{item.name || ''}}</text>
						<text style="color:#888888;margin-left:15rpx;">{{item.country.name || ''}}教师</text>
					</view>
					<view class="BoxTop">
						<text class="Newtitle">{{item.speciality || ''}}</text>
					</view>
				</view>
			</view>
			<view class="solid"></view>
			<view class="headers_title">
				<view class="view"></view>
				<text>{{item.description || ''}}</text>
			</view>
			<view class="user_click">
				<u--image :showLoading="true" src="../../../static/laoshiyuyan.png" width="52rpx" height="52rpx"
					radius="0" shape="circle"></u--image>
				<u--image :showLoading="true" src="../../../static/dianzan_yes.png" width="44rpx" height="40rpx"
					radius="0" shape="circle" v-if="item.visible_switch == 1 || item.visible_switch == '1'"
					@click="collectTeacher(item,0)"></u--image>
				<u--image :showLoading="true" src="../../../static/dianzan_no.png" width="44rpx" height="40rpx"
					radius="0" shape="circle" v-else @click="collectTeacher(item,1)"></u--image>
				<button @click="linkUrl(`/pages/detail/Teacher_details?id=${item.shop_id}`)">预约课程</button>
			</view>
		</view>
		<u-picker :show="picker_show" :columns="columns" keyName="name" @confirm="confirm"
			@cancel="picker_show = false"></u-picker>
		<u-picker :show="teacherCountry_show" :columns="teacherCountrys" keyName="name"
			@confirm="teacherCountrys_confirm" @cancel="teacherCountry_show = false"></u-picker>
	</view>
</template>

<script>
	import {
		teacherLists,
		collectTeacher,
		teacher_category,
		teacherCountry
	} from '../../../api/Teacher.js';
	export default {
		data() {
			return {
				picker_show: false,
				teacherCountry_show: false,
				lists: [],
				columns: [], //学习语种数据源
				teacherCountrys: [], //所属国家数据源
				req: {
					shop_id: 1, //门店ID
					teacher_category_name:'',//分类名称
					teacher_category_id: '', //老师分类ID
					country_name: '', //国家名称
					country_id: '', //国家ID
					page: 1,
					limit: 10,
					name: '', //搜索名字
					date: '', //搜索日期
					times: '', //搜索时间段
				}
			}
		},
		onLoad() {
			uni.setStorageSync('shop_id',1)
		},
		onShow() {
			this.teacherLists();
			this.teacher_category();
			this.teacherCountry();
		},
		methods: {
			/**
			@method 学习语种u-picker确认
			**/
			confirm(e) {
				this.req = {
					...this.req,
					...{
						teacher_category_name: e.value[0].name || '',
						teacher_category_id: e.value[0].id || ''
					}
				};
				this.teacherLists();
				this.picker_show = false;
				console.log(e.value[0]);
			},
			/**
			@method 来自国家u-picker确认
			**/
			teacherCountrys_confirm(e) {
				this.req = {
					...this.req,
					...{
						country_name: e.value[0].name || '',
						country_id: e.value[0].id || ''
					}
				};
				this.teacherLists();
				this.teacherCountry_show = false;
			},
			/**
			@method 老师列表
			**/
			async teacherLists() {
				try {
					const res = await teacherLists({
						shop_id: 1,
						page: 1,
						limit: 10
					});
					this.lists = [...res.data.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 老师分类
			**/
			async teacher_category() {
				try {
					const res = await teacher_category();
					this.columns = [...[res.data]];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 老师所属国家
			**/
			async teacherCountry() {
				try {
					const res = await teacherCountry();
					this.teacherCountrys = [...[res.data]];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 老师列表
			**/
			async collectTeacher(item, type) {
				try {
					const res = await collectTeacher({
						teacher_id: item.id || '',
						type: type, //0取消收藏 1收藏
					});
					uni.showToast({
						title: type == 0 ? '取消收藏成功' : '已收藏',
						icon: 'none',
						duration: 2000
					});
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			change(e) {
				console.log(e);
			},
			linkUrl(e) {
				uni.navigateTo({
					url: e
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f7f9;
	}
</style>
<style scoped lang="scss">
	.content {
		width: 100%;

		.headers {
			width: auto;
			height: auto;
			padding: 30rpx 30rpx 20rpx 30rpx;
			background: linear-gradient(179deg, #EDF6FD 0%, #C8EEFD 19%, #FFFFFF 100%, #FFFFFF 100%);

			/deep/ .u-input {
				background-color: #fff;
			}

			._select {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.leftView {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: #fff;
					border-radius: 5rpx;
					padding: 15rpx 30rpx 15rpx 30rpx;

					view {
						display: flex;
						align-items: center;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #4C4C4C;
						margin-right: 10rpx;
					}
				}

				.rightView {
					background-image: url('../../../static/Home/shaixuan.png');
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					// background-color: #fff;
					border-radius: 5rpx;
					padding: 15rpx 30rpx 15rpx 30rpx;

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #029CFE;
						margin-left: 10rpx;
					}
				}
			}
		}

		.user_click {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			button {
				width: 408rpx;
				height: 62rpx;
				background: #029CFE;
				color: #fff;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				margin: 0px;
			}
		}

		.headers_title {
			width: auto;
			margin: 0px auto;
			display: flex;
			margin-top: 20rpx;

			.view {
				width: 10rpx;
				height: 34rpx;
				background: #029CFE;
				border-radius: 6rpx;
			}

			.flex {
				display: flex;
				align-items: center;
			}

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				margin-left: 15rpx;
			}
		}

		.listItem {
			width: 85%;
			background: #FFFFFF;
			border-radius: 16rpx;
			background-color: #fff;
			margin: 0px auto;
			padding: 30rpx;
			margin-top: 30rpx;

			#myVideo {
				width: 100%;
				border-radius: 16rpx;
			}

			.solid {
				width: auto;
				height: 2rpx;
				border: 2rpx solid #E9E9E9;
				background-color: #E9E9E9;
				margin-top: 20rpx;
			}

			.BoxOne {
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				.marginBottom {
					margin-bottom: 10rpx;
				}

				.BoxTop {
					margin-left: 20rpx;
					display: flex;
					align-items: center;

					text {
						display: block;
						font-size: 24rpx;
					}

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						font-style: normal;
					}

					.Newtitle {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>